<div id="notification-settings" class="settings-section" data-name="notifications">
    <form class="notification-settings-form">
        <div class="notification-reminder tip">{{#tr this }}Desktop notifications are triggered for messages that are offscreen when they arrive. Mobile and email notifications are triggered once you have been away from Zulip for a few minutes.{{/tr}}</div>

        <div id="stream-notify-settings">
            <h3 class="inline-block">{{t "Stream messages" }}</h3>
            <div class="alert-notification" id="stream-notify-settings-status"></div>
            <p>{{t "Unless I say otherwise for a particular stream, I want:" }}</p>

            {{#each notification_settings.stream_notification_settings}}
            {{> settings_checkbox
              setting_name=this
              is_checked=(lookup ../page_params this)
              label=(lookup ../settings_label this)
              realm_push_notifications_enabled=(lookup ../page_params.realm_push_notifications_enabled)
              push_notifications_tooltip=(lookup ../push_notification_tooltip this)}}
            {{/each}}

            <p class="notification-settings-note">
                {{#tr this}}Change notification settings for individual streams on your <a href="/#streams">Streams page</a>.{{/tr}}
            </p>
        </div>

        <div id="pm-mention-notify-settings">
            <h3 class="inline-block">{{t "Private messages, @-mentions, and alert words" }}</h3>
            <div class="alert-notification" id="pm-mention-notify-settings-status"></div>

            {{#each notification_settings.pm_mention_notification_settings}}
            {{> settings_checkbox
              setting_name=this
              is_checked=(lookup ../page_params this)
              label=(lookup ../settings_label this)
              realm_push_notifications_enabled=(lookup ../page_params.realm_push_notifications_enabled)
              push_notifications_tooltip=(lookup ../push_notification_tooltip this)}}
            {{/each}}
        </div>

        <div id="other_notifications" class="m-10 inline-block">

            <h3 class="inline-block">{{t "Other notification settings" }}</h3>
            <div class="alert-notification" id="other-notify-settings-status"></div>

            <h5>{{t "Desktop" }}</h5>

            {{#each notification_settings.desktop_notification_settings}}
            {{> settings_checkbox
              setting_name=this
              is_checked=(lookup ../page_params this)
              label=(lookup ../settings_label this)}}
            {{/each}}

            <label for="notification_sound">
                {{t "Notification sound" }}
            </label>

            <div class="input-group {{#unless enable_sound_select}}control-label-disabled{{/unless}}">
                <select name="notification_sound" id="notification_sound"
                  {{#unless enable_sound_select}}
                  disabled
                  {{/unless}}>
                    {{#each page_params.available_notification_sounds}}
                    <option value="{{ this }}">{{ this }}</option>
                    {{/each}}
                </select>
                <a id="play_notification_sound">
                    {{t "Play sound" }}
                </a>
            </div>

            <div class="input-group">
                <label for="desktop_icon_count_display" class="dropdown-title">{{ settings_label.desktop_icon_count_display }}</label>
                <select name="desktop_icon_count_display" id="desktop_icon_count_display" class="prop-element">
                    {{#each desktop_icon_count_display_values}}
                    <option value="{{this.code}}">{{this.description}}</option>
                    {{/each}}
                </select>
            </div>

            <h5>{{t "Mobile" }}</h5>

            {{#each notification_settings.mobile_notification_settings}}
            {{> settings_checkbox
              setting_name=this
              is_checked=(lookup ../page_params this)
              label=(lookup ../settings_label this)
              realm_push_notifications_enabled=(lookup ../page_params.realm_push_notifications_enabled)
              push_notifications_tooltip=(lookup ../push_notification_tooltip this)}}
            {{/each}}

            <h5>{{t "Email" }}</h5>

            {{#each notification_settings.email_notification_settings}}
            {{> settings_checkbox
              setting_name=this
              is_checked=(lookup ../page_params this)
              label=(lookup ../settings_label this)}}
            {{/each}}

        </div>
    </form>
</div>
